<template>
	<view class="page">
		<u-loading-page :loading="loadingShow" bgColor="#ffffff94;" loadingColor="#a4b0be;" color="#a4b0be;"
			loadingText="订单加载中...." fontSize="30rpx"></u-loading-page>
		<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
			@clickItem="onClickItem" @searchValue="search" :itemSize="25"></tabControl>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" style="margin-top: -90rpx;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="(item,index) in items" :key='index'>
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="loadMoreData">
					<view class="contener">
						<view class="contener700">
							<view class="cont" v-for="item in orderList" :key="item.orderNum">
								<view class="head">
									<view class="refundTag" v-if="item.afterSaleStatus==1">
										<view class="refund">
											退款中
										</view>
										<view class="triangle"></view>
									</view>
									<text style="font-size: 30rpx;">订单号:{{item.orderNum}}</text>
									<text class="iconfont icon-fuzhicopy25" @click="copy(item.orderNum)"
										style="color: #a5a5a5;"></text>
									<view style="margin-left: auto;">
										<rich-text :nodes="getStatus(item.status)" style="font-size: 24rpx;">
										</rich-text>
									</view>
								</view>
								<view class="line"></view>
								<view class="contBot" style="padding: 30rpx;">
									<view style="margin-bottom: 30rpx;" @click="goDetail(item.groupGoodsId)">
										<view class="leftImg">
											<image :src="item.snapshot.img" mode="aspectFill"></image>
										</view>
										<view class="rightCont">
											<u--text :text="item.snapshot.title" :lines="2"></u--text>
											<view class="person" style="display: flex">
												<text style="color: #aaaaaa;font-size: 30rpx;"
													v-if="item.snapshot.specName">{{item.snapshot.specName}}</text>
												<view style="margin-left: auto;">
													<u-tag
														:text="item.type === 0 ? '自提' : (item.type === 3 ? '配送' : '快递')"
														:type="item.type === 0 ? 'error' : (item.type === 3 ? 'primary' : 'success')"
														shape="circle">
													</u-tag>
												</view>
											</view>
											<view class="contPrice">
												<view style="display: flex;">
													<view class="price">
														<text
															:class="item.hasRealUnit?'':'noLine'">￥{{item.totalUnitPrice}}</text>
													</view>
													<view class="bulkPrice" v-if="item.hasRealUnit">
														拼单价￥<text>{{item.realUnitPrice}}</text></view>
												</view>
												<text class="num">x{{item.count}}</text>
											</view>
										</view>
									</view>
									<view class="line"></view>
									<view class="orderListprice">
										<view>
											合计:
											<text class="littleMon" style="color: #ff7a05;margin-left: 10rpx;">￥</text>
											<text class="totalPrice">
												{{item.realPrice}}
											</text>
										</view>
										<view class="paybtnBox">
											<button class="paybtn greenborder" @tap="tzorderDetails(item)"
												v-if="item.status==0 && item.snapshot.type != 0">立即支付</button>
											<!-- 这里样式改一下，改成红框 然后两个按钮尺寸都改小一点 -->
											<button class="paybtn redborder"
												v-if="item.status==0 && item.snapshot.type != 0"
												@click="cancelOrder(item.orderNum)">取消订单</button>

											<!-- v-else -->
											<view v-else style="display: flex;">
												<button @tap="tzorderDetails(item)"
													class="paybtn balckborder">订单详情</button>
												<button @tap="selectCode(item.qrCode)" v-if="item.qrCode"
													class="paybtn balckborder code">查看二维码</button>
											</view>
										</view>
									</view>
								</view>
							</view>

							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="image">
				<image :src="qrCode" mode="aspectFill"></image>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// QrCode 二维码字段
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				loadingShow: true,
				orderList: [],
				/* 
				0：待支付
				1：已支付（拼团中）
				2：拼团成功
				3: 已发货
				4：已评价
				-1：已取消 
				 */
				items: ['全部', '待支付', '已支付', '已发货', '待提', '已提', '待评价', '已完成', '已取消', '已退款'],
				current: 0,
				ifBottomRefresh: false,
				contentText: {
					contentdown: ' ',
					contentrefresh: ' ',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 4,
					type: 1,
					status: ""
				},
				imgapi: "",
				status: 'more',
				timer: null,
				totalPrice: 0,
				qrCode: "",
			};
		},
		onShow() {

		},
		onLoad() {
			if (this.params.pageNo == 1) {
				this.loadingShow = true
			}
			this.getList()
		},
		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				console.log("触底")
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getList()
			} else {
				this.status = "noMore"
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: `/pageA/shop/bulkDetail?id=` + id
				})
			},
			copy(text) {
				uni.setClipboardData({
					data: text, //要复制的内容
					success: res => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'none'
						})
					}
				})
			},
			selectCode(img) {
				console.log(this.$refs.popup);
				this.$refs.popup.open('center')
				this.qrCode = this.imgapi + img
			},
			// 底部刷新
			loadMoreData() {
				// 防止多次触发,节流
				if (this.status != 'noMore') {
					this.status = 'loading';
					this.ifBottomRefresh = true
					this.getList()
				} else {
					this.status = "noMore"
				}
			},

			tzorderDetails(item) {
				const items = JSON.stringify(item);
				uni.navigateTo({
					url: `./bulkOrderDetail?item=${encodeURIComponent(items)}`
				})
			},
			cancelOrder(orderNum) {
				let _this = this
				uni.showModal({
					title: '取消订单',
					content: '确定取消该该订单吗',
					success: function(res) {
						if (res.confirm) {
							_this.$axios({
								url: "user/usGroupGoodsOrder/cancelOrder",
								method: "post",
								data: {
									orderNum: orderNum,
								}
							}).then((res) => {
								uni.showToast({
									title: res.result,
									icon: 'none',
									duration: 2000,
									success() {
										console.log('2333', _this.params);
										let status = _this.params.status
										_this.cleanList()
										_this.params.status = status
										_this.getList()
									}
								})

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			cleanList() {
				this.orderList = [];
				this.params = {
					pageNo: 1,
					pageSize: 4,
					type: 1
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			getStatus(status) {
				/*
				0：待支付
				1：已支付（拼团中）
				2：拼团成功
				3: 已发货
				4：已评价
				-1：已取消 
				 */
				switch (status) {
					case 0:
						return "<font style='color: #6b6a70'>待付款</font>"
					case 1:
						return "<font style='color: #409eff'>已支付(拼团中)</font>"
					case 2:
						return "<font style='color: #e1b919'>待收货</font>"
					case 3:
						return "<font style='color: #3daa3d'>待提货</font>"
					case 4:
						return "<font style='color: #67c23a'>已提货</font>"
					case 5:
						return "<font style='color: #9625c2'>待评价</font>"
					case 6:
						return "<font style='color: #1d6dc2'>已完成</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
					case -2:
						return "<font style='color: #ea8716'>已退款</font>"
				}
			},

			getList() {
				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "user/usGroupGoodsOrder/orderList",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: this.params.type,
						status: this.params.status
					}
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据						
					if (res.result.pages >= this.params.pageNo) {
						let list = res.result.list
						if (this.ifBottomRefresh) {
							list.forEach(val => {
								val.snapshot = JSON.parse(val.snapshot)
								if (val.snapshot.img) {
									val.snapshot.img = this.imgapi + JSON.parse(val.snapshot.img)[0]
								}
							})
							this.orderList = this.orderList.concat(list)
						} else {
							list.forEach(val => {
								val.snapshot = JSON.parse(val.snapshot)
								if (val.snapshot.img) {
									val.snapshot.img = this.imgapi + JSON.parse(val.snapshot.img)[0]
									val.snapshot
								}
							})
							this.orderList = list
						}
						this.orderList = this.dealData(this.orderList)
					} else {
						this.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					console.log("8848: ", 8848);
					this.params.pageNo++;
					if (this.loadingShow) {
						this.loadingShow = false
					}
				})
			},
			// 处理数据
			dealData(list) {
				// realPrice:实际价格  totalPrice:未处理价
				list.forEach(val => {
					// val.totalPrice = 50 //测试
					let freightPrice =
						typeof val.freightPrice === "undefined" ||
						val.freightPrice === null ||
						val.freightPrice === "" ? 0 :
						val.freightPrice;
					val.totalUnitPrice = ((val.totalPrice - freightPrice) / val.count).toFixed(1)
					val.realUnitPrice = ((val.realPrice - freightPrice) / val.count).toFixed(1)
					if (val.realPrice != val.totalPrice) {
						// 真实价与总价不相同   显示拼单价
						val.hasRealUnit = true
					}
				})
				return list
			},

			onClickItem(val) {
				this.current = val.currentIndex
				console.log(val)
			},
			//搜索框的值
			search(e) {
				console.log('eee', e)
			},
			scollSwiper(e) {
				this.cleanList()
				switch (e.detail.current) {
					case 0:
						this.params.status = ""
						break;
					case 1:
						this.params.status = "0"
						break;
					case 2:
						this.params.status = "1"
						break;
					case 3:
						this.params.status = "2"
						break;
					case 4:
						this.params.status = "3"
						break;
					case 5:
						this.params.status = "4"
						break;
					case 6:
						this.params.status = "5"
						break;
					case 7:
						this.params.status = "6"
						break;
					case 8:
						this.params.status = "-1"
						break;
					case 9:
						this.params.status = "-2"
						break;
				}
				this.current = e.target.current
				this.getList()
			}
		}
	};
</script>
<style scoped lang="scss">
	.image {
		width: 400rpx;
		background: #fff;
		padding: 10rpx;
		box-sizing: border-box;
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.totalPrice {
		color: #ff7a05;
		font-weight: bold;
		font-size: 35rpx;
	}

	.cont {
		background-color: #FFFFFE;
		border-radius: 25rpx;
		overflow: hidden;
		margin-bottom: 40rpx;

	}

	.cont .head {
		position: relative;
		padding: 20rpx 30rpx;
		font-size: 35rpx;
		display: flex;
		justify-content: space-between;

		.refundTag {
			position: absolute;
			bottom: -33rpx;
			left: -18rpx;
		}

		.refund {
			position: absolute;
			font-size: 21rpx;
			bottom: 67rpx;
			left: 19rpx;
			color: white;
			transform: rotate(313deg);
		}

		.triangle {
			width: 0;
			height: 0;
			border-top: 100px solid #f39c12;
			border-right: 100px solid transparent;
		}
	}

	.line {
		height: 3rpx;
		background-color: #eee;
	}

	.cont .contBot {
		padding: 0 30rpx;
	}

	.contBot .leftImg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
		overflow: hidden;
		position: absolute;
		border: 2rpx solid #eee;
	}

	.contBot .leftImg image {
		width: 100%;
		height: 100%;
	}

	.contBot .leftImg text {
		display: inline-block;
		color: #FFFFFE;
		background-color: #86cc14;
		position: absolute;
		top: -2px;
		left: 0px;
		font-size: 25rpx;
		padding: 0rpx 10rpx;
	}

	.contList {
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #eee;
		padding: 20rpx 0;
	}

	.contList .left {
		font-size: 10rpx 30rpx;
	}

	.contList .left image {
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
	}

	.contList .right {
		font-size: 25rpx;
		display: flex;
		align-items: center;
	}

	.contList .right .font {
		width: 120rpx;
		color: #868686;
		margin-right: 20rpx;
	}

	.contList .right button {
		height: 50rpx;
		background-color: #86cc14;
		line-height: 50rpx;
		font-size: 30rpx;
		color: #fff;
		padding: 0rpx 30rpx;
		border-radius: 100rpx;
	}

	.contBot .rightCont {
		margin-left: 175rpx;
	}

	.contBot .rightCont .person {
		color: #aaaaaa;
		font-size: 30rpx;
		margin: 8rpx 0;
		height: 50rpx;
	}

	.contBot .rightCont .contPrice {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contBot .rightCont .contPrice .num {
		font-size: 30rpx;
		color: #aaaaaa;
	}

	.rightCont .contPrice .price {
		color: #aaaaaa;
		font-size: 25rpx;
	}

	.rightCont .contPrice .price .noLine {
		text-decoration: none;
	}

	.rightCont .contPrice .price text {
		color: #ff7800;
		font-weight: bold;
		text-decoration: line-through;
		font-size: 38rpx;
		margin-right: 5rpx;
	}

	.rightCont .contPrice .bulkPrice {
		font-size: 24rpx;
		background: #86cc14;
		color: #fff;
		text-align: center;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
		margin-top: -5rpx;
	}

	.rightCont .contPrice .bulkPrice text {
		font-size: 40rpx;
		font-weight: bold;
	}

	page {
		height: 100%;
	}

	/deep/ .tabControl {
		height: 10vh;
		background-color: #aaff00;
	}

	/deep/ .swiper {
		height: 90vh;
	}

	.page {
		padding-top: 200rpx;
		height: 100%;
	}

	.orderListbox {
		margin-top: 10rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		/* height: 280rpx; */
		padding: 20rpx;
	}

	.between {
		padding-bottom: 15rpx;
		border-bottom: 0.5rpx solid #C4C4C4;
	}

	.between2 {
		display: flex;
		justify-content: space-between;
		width: 520rpx;
	}

	.orderListboximg {
		margin-top: 10rpx;
		border-radius: 20rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.orderListxinxi {
		margin-top: 10rpx;
		height: 130rpx;
		display: flex;
	}

	.orderListprice {
		margin-top: 27rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.paybtn {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		transform: scale(0.9);
		background-color: #fff;
	}

	.balckborder {
		border: 1rpx solid #747474;
		color: #747474;
	}

	.redborder {
		border: 1rpx solid #e20f0f;
		color: #e20f0f;
	}

	.greenborder {
		border: 1rpx solid #3282c8;
		color: #3282c8;
	}

	.paybtnBox {
		display: flex;
	}

	.paybtnBox button {
		border-radius: 50rpx;
	}

	.snapshot {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 35rpx;
		color: #6c6c6d;
	}

	.paybtnBox .code {
		padding: 0 10px;
		color: #86cc14;
		border-color: #86cc14;
	}
</style>
